import { Component, OnInit, ChangeDetectorRef, NgModule } from '@angular/core';
//导入公共依赖模块
import { ShareModule } from '@app/share/share.module';

import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem
} from '@angular/cdk/drag-drop';

import { NzCustomColumn } from 'ng-zorro-antd/table';

interface Person {
  key: string;
  name: string;
  gender: 'male' | 'female';
  age: number;
  address: string;
}

interface CustomColumn extends NzCustomColumn {
  name: string;
  required?: boolean;
  position?: 'left' | 'right';
  render?: (data: any, index: number) => string;
}

@Component({
  selector: '[appInnerHtml]',
  standalone: true,
  imports: [ShareModule],
  templateUrl: './m-table.component.html',
  styleUrls: ['./m-table.component.less']
})
export class MTableComponent implements OnInit {
  //数据源
  listOfData: Person[] = Array.from({ length: 24 }).map((_, index) => ({
    key: index.toString(),
    name: `Edward King ${index}`,
    gender: Math.random() > 0.5 ? 'male' : 'female',
    age: index,
    address: `London, Park Lane no. ${index}`
  }));

  //表单列
  customColumn: CustomColumn[] = [
    {
      name: '名称',
      value: 'name',
      default: true,
      width: 200,
      render: (row, index) => {
        return `<span>${row.name}</span>`;
      }
    },
    {
      name: '性别',
      value: 'gender',
      default: true,
      width: 200
    },
    {
      name: '地址',
      value: 'address',
      default: true,
      width: 200
    },
    {
      name: '年龄',
      value: 'age',
      default: true,
      width: 200
    },
    {
      name: '操作',
      value: 'action',
      default: true,
      required: true,
      position: 'right',
      width: 200,
      render: (row, index) => {
        return ` <a>编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>删除</a>`;
      }
    }
  ];

  isVisible: boolean = false;
  title: CustomColumn[] = [];
  footer: CustomColumn[] = [];
  fix: CustomColumn[] = [];
  notFix: CustomColumn[] = [];
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.title = this.customColumn.filter(
      item => item.position === 'left' && item.required
    );
    this.footer = this.customColumn.filter(
      item => item.position === 'right' && item.required
    );
    this.fix = this.customColumn.filter(item => item.default && !item.required);
    this.notFix = this.customColumn.filter(
      item => !item.default && !item.required
    );
  }

  drop(event: CdkDragDrop<CustomColumn[]>): void {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
    this.fix = this.fix.map(item => {
      item.default = true;
      return item;
    });
    this.notFix = this.notFix.map(item => {
      item.default = false;
      return item;
    });
    this.cdr.markForCheck();
  }

  deleteCustom(value: CustomColumn, index: number): void {
    value.default = false;
    this.notFix = [...this.notFix, value];
    this.fix.splice(index, 1);
    this.cdr.markForCheck();
  }

  addCustom(value: CustomColumn, index: number): void {
    value.default = true;
    this.fix = [...this.fix, value];
    this.notFix.splice(index, 1);
    this.cdr.markForCheck();
  }

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    this.customColumn = [
      ...this.title,
      ...this.fix,
      ...this.notFix,
      ...this.footer
    ];
    this.isVisible = false;
    this.cdr.markForCheck();
  }

  handleCancel(): void {
    this.isVisible = false;
  }
}
